<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_媒体查询_运算符</title>
  <style>
    *{
      margin: 0;
      padding: 0 ;
    }
    h1{
      height: 200px;
      background-color: grey;
      font-size: 100px;
      /* 文字水平居中 */
      text-align: center;
      /* 文字垂直居中 */
      line-height: 200px;

    }

    /* 屏幕尺寸大于等于700且小于等于800px时，应用如下样式 */
    @media (min-width:700px) and (max-width:800px) {
      h1{
        background-color: plum;
      }
    }

    /* 电子屏幕且尺寸在700到800之间 */
    @media screen and (min-width:700px) and (max-width:800px){
      h1{
        background-color:red
      }
    }

    /* 或运算  小于700px  or  大于等于800px */
    @media (max-width:700px) or (min-width:800px){
      h1{
        background-color: aquamarine;
      }
    }

    /* 否定运算符 */
    @media not screen{
      h1{
        background-color: blue;
      }
    }

  </style>
</head>
<body>
  <h1>你好啊</h1>
  
</body>
</html>